<template>
	<view class="detail">
		<view class="detail-top flex">
			<book-cover
				:cover="cover.url"
				:empty="cover.empty"
				:title="detail.clearTitle"
			></book-cover>
			<view class="flex-1">
				<view class="name">
					{{detail.baseMarcInfoDto.titles || '-'}}
				</view>
				<view class="text">
					作者：{{detail.baseMarcInfoDto.cleanAuthor || '-'}}
				</view>
				<view class="text">
					ISBN：{{detail.baseMarcInfoDto.isbn || '-'}}
				</view>
				<!-- <view class="text-green">
					书刊状态：{{detail.processTypeText || '-'}}
				</view>
				<view class="text-green">
					借阅属性： {{detail.circFlag?'外借':'在馆'}}
				</view> -->
			</view>
			<!-- <view class="flex">
				<button class="collect">收藏</button>
			</view> -->
		</view>
		<view class="detail-tab flex items-center">
			<view
				class="detail-tab-item flex-1 text-center"
				v-for="(item,index) in tabs"
				:class="tabsActive === index ?'active':''"
				@click="tabsActive = index"
			>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="detail-content">
			<!-- 馆藏信息 -->
			<template v-if="tabsActive === 0">
				<view class="list">
					<view
						class="list-item"
						:class="item.circAttr ==='可借' ?'green':'red'"
						v-for="(item,index) in booksList"
					>
						<view class="list-item-top flex text-center">
							<view class=" flex-1 border-vertical">
								<view class="label">
									{{item.locationName}}
								</view>
								<view class="text">
									馆藏地
								</view>
							</view>
							<view class=" flex-1 border-vertical">
								<view class="label">
									{{item.curLocationName}}
								</view>
								<view class="text">
									所在地
								</view>
							</view>
							<view class=" flex-1">
								<view
									class="label"
									:class="item.circAttr == '0'?'text-green':'text-red'"
								>
									{{circAttrMap[item.circAttr]}}
								</view>
								<view class="text">
									借阅属性
								</view>
							</view>
						</view>
						<view class="border-horizontal"> </view>
						<view class="list-item-content flex flex-wrap">
							<view class="info text">索书号：{{item.callNo }} </view>
							<view class="info text">条码号：{{item.barcode }}</view>
							<view class="info text">入藏日期：{{item.inDate}} </view>
							<view class="info text">年代：{{item.year || '-'}}</view>
							<view class="info text">捐赠人：{{item.donatorName || '-'}} </view>
							<view
								class="info text"
								:class="item.processType === '在架'?'text-green':'text-red'"
							>
								书刊状态：{{item.processType}}
							</view>
						</view>
					</view>
				</view>
				<template v-if="recommendList.length">
					<view class="hot">
						<view class="hot-title">
							相关推荐
						</view>
						<scroll-view scroll-x>
							<view class="book flex">
								<view
									class="book-item flex flex-col"
									v-for="(item,index) in recommendList"
								>
									<book-cover
										:cover="item.cover"
										:empty="item.empty"
										:title="item.title"
									></book-cover>
									<view class="book-item-name">
										{{item.title}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</template>
			</template>
			<!-- 详细书目 -->
			<template v-if="tabsActive === 1">
				<view class="rich-text">
					<!-- 提要文摘附注 -->
					<mp-html :content="richtext"></mp-html>
				</view>
			</template>

		</view>
	</view>
</template>

<script>
	import {
		find
	} from '../../../api/modules/find';
	import {
		mock,
		ProcessType
	} from '../../../api/modules/mock';
	import {
		getDicItemMap
	} from '../../../utils/dic';
	import BookCover from '@/components/book-cover/book-cover.vue';
	import {
		getCovers
	} from '@/utils/cover/cover';
	export default {
		components: {
			BookCover
		},
		data() {
			return {
				cover: {
					url: "",
					empty: false
				},
				pageQuery: {},
				detail: {},
				tabsActive: 0,
				tabs: [{
						name: "馆藏信息"
					},
					{
						name: "详细书目"
					},
					// {
					// 	name: "在图书馆查找"
					// },
				],
				recommendList: [],
				booksList: [],
				circAttrMap: {},
				richtext: ""
			}
		},
		onLoad(options) {
			this.pageQuery = options
			// console.log('options', this.pageQuery);
			this.getDetail(options.recordId)
			this.booksListGet(options.recordId)
			this.circAttrMapGet()
			this.getRecommendList(options.recordId)
		},
		methods: {
			getDetail(recordId) {
				find.searchResultDetail.getDetail(({
					recordId
				})).then((data) => {
					// console.log('find.searchResultDetail.getDetail', data);
					this.detail = data
					this.getCover({
						"title": data.baseMarcInfoDto.title,
						"isbn": data.baseMarcInfoDto.isbn,
						"recordId": recordId
					})
					this.richtextGet()
				})
			},
			getRecommendList(recordId) {
				find.unify.searchForDetail({
					"subject": [],
					"kindNo": [],
					"excludeField": "record_id",
					"excludeFieldContent": recordId,
					"sortField": "relevance",
					"sortClause": "asc",
					"page": 1,
					"rows": 10
				}).then(({
					searchResult
				}) => {
					getCovers(searchResult).then((list) => {
						console.log('find.unify.searchForDetail', list);
						this.recommendList = list
					})
				})
			},
			getCover(params) {
				find.book.getDuxiuImageUrl(params).then((data) => {
					// console.log('data', data);
					this.cover = {
						url: data || this.pageQuery.cover,
						empty: !data
					}
				})
			},
			booksListGet() {
				const {
					pageQuery
				} = this
				find.physical.groupitems({
					"page": 1,
					"rows": 100,
					"entrance": null,
					"recordId": pageQuery.recordId,
					"isUnify": true
				}).then(({
					list
				}) => {
					this.booksList = list
				})
			},
			circAttrMapGet() {
				getDicItemMap('circAttr').then((data) => {
					this.circAttrMap = data
				})
			},
			richtextGet() {
				const content = this.detail?.bean2List?.find(item => item.description === '提要文摘附注')?.fieldVal
				this.richtext = `<h3>内容简介</h3><p>${content}<p>`
			},
		}
	}
</script>

<style lang="scss">
	.detail {
		&-top {
			padding: 24rpx;
			box-sizing: border-box;
			background: #FFF;

			.cover {
				width: 212rpx;
				height: 296rpx;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
				margin-right: 24rpx;
			}

			.name {
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}

			.text {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #6C7A94;
			}

			.text-green {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #0E8E00;
			}

			.collect {
				width: 98rpx;
				height: 48rpx;

				align-self: flex-end;

				background: #DE8C10;
				border-radius: 8rpx;

				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		&-tab {
			margin-top: 24rpx;
			height: 88rpx;
			background: #FFFFFF;

			&-item {
				font-size: 32rpx;
				color: #141414;

				&>text {
					position: relative;
					z-index: 1;
				}
			}

			.active {
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: calc(50% - 40rpx);
					bottom: -2rpx;

					width: 80rpx;
					height: 18rpx;

					background: #E6A549;
					border-radius: 14rpx;

				}
			}

		}

		&-content {

			.list {
				padding: 4rpx 24rpx 24rpx;
				box-sizing: border-box;
				overflow: hidden;

				&-item {
					margin-top: 20rpx;
					width: 702rpx;
					height: 352rpx;
					border-radius: 16rpx;
					border-width: 2rpx;
					border-style: solid;
					overflow: hidden;
					box-sizing: border-box;


					.border-horizontal {
						width: 94%;
						border-bottom: 1rpx solid #EBEBEB;
						margin: auto;
					}

					.border-vertical {
						border-right: 1rpx dashed #C8C8C8;
					}

					.label {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
					}

					.text {
						margin-top: 16rpx;
						font-size: 28rpx;
						color: #6C7A94;
					}

					&-top {
						padding-top: 28rpx;
						padding-bottom: 18rpx;
					}

					&-content {
						padding: 0 24rpx;
						box-sizing: border-box;

						.info {
							width: 50%;
						}
					}

				}

				.green {
					background: #FAFFF9;
					border-color: #0E8E00;
				}

				.red {
					background: #FFF8F8;
					border-color: #BB0000;
				}

				.text-green {
					color: #0E8E00;
				}

				.text-red {
					color: #BB0000;
				}
			}

			.hot {
				background-color: #fff;
				padding: 24rpx;
				box-sizing: border-box;

				&-title {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
				}

				.book {
					padding-top: 24rpx;

					&-item {
						margin-right: 24rpx;

						&-cover {
							width: 184rpx;
							height: 256rpx;
							border-radius: 16rpx;
							overflow: hidden;
							box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
						}

						&-name {
							margin-top: 4rpx;
							font-weight: 500;
							font-size: 32rpx;
							color: #262626;
						}
					}
				}
			}

			.rich-text {
				margin-top: 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				background: #fff;
			}
		}
	}
</style>